import React from 'react'
import ReactEcharts from 'echarts-for-react';

export default class HorizontalBar extends React.Component {
  getOption = () => {
    const {
      yAxisLeft,
      yAxisRight,
      yAxisLeftName = '区、县（市）',
      yAxisRightName = '已完成/总数',
    } = this.props

    return {
      grid: {
        left: '2%',
        // right: '2%',
        bottom: '2%',
        containLabel: true
      },
      xAxis: {
        show: false,
        type: 'value',
      },
      yAxis: [{
        name: yAxisLeftName,
        nameLocation: 'start',
        nameStyle: {
          color: 'rgba(102, 102, 102, 1)'
        },
        type: 'category',
        inverse: true,
        axisLabel: {
          show: true,
          textStyle: {
            color: 'rgba(51, 51, 51, 1)'
          },
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        data: yAxisLeft
      }, {
        name: yAxisRightName,
        nameLocation: 'start',
        nameStyle: {
          // TODO 使用 rich 更改 https://echarts.apache.org/zh/option.html#yAxis.nameTextStyle.rich
          color: 'rgba(102, 102, 102, 1)'
        },
        type: 'category',
        inverse: true,
        axisLabel: {
          show: true,
          textStyle: {
            color: 'rgba(51, 51, 51, 1)'
          },
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        show: true,
        position: 'center',
        data: yAxisRight
      }],
      series: [{
        type: 'bar',
        zlevel: 1,
        barWidth: 20,
        data: yAxisRight,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
              offset: 0,
              color: 'rgba(7, 133, 249, 1)'
            }, {
              offset: 1,
              color: 'rgba(55, 183, 219, 1)'
            }],
            globalCoord: false,
          }
        }
      }]
    }
  }

  render() {
    return (
      <ReactEcharts
        option={this.getOption()}
      />
    )
  }
}